<script lang="ts" setup>
import { loginWithPassword } from '@/api/user'

import Layout from '@/components/Form/Layout.vue'
import XInput from '@/components/Form/XInput.vue'
import XButton from '@/components/Form/XButton.vue'
import XPasswordInput from '@/components/Form/XPasswordInput.vue'

const formData = ref({
  account: '', //账号
  password: '', //密码
  accept: false //是否同意协议
})

const { base, success } = useToast()
const { switchLoginState } = useUser()

// 登录按钮逻辑
async function login() {
  const { code, msg, data } = await loginWithPassword({
    phone: formData.value.account,
    password: formData.value.password
  })
  if (code !== 0) {
    base(msg || '登录失败！')
  } else {
    success(msg || '登录成功！')
    switchLoginState(data)
  }
}
</script>

<template>
  <Layout v-model="formData.accept" title="密码登录" :show-wechat="true">
    <view mt-10>
      <XInput v-model="formData.account" placeholder="请输入账号" />
    </view>
    <view mt-5>
      <XPasswordInput v-model="formData.password" />
    </view>
    <view my-5>
      <XButton :form-data="formData" @click="login">
        立即登录
      </XButton>
    </view>
    <view between>
      <navigator url="/pages/login/captcha" hover-class="text-blue transition" text="30 #555555">
        忘记密码
      </navigator>
      <navigator text="30 #555555" url="/pages/register/index" hover-class="text-blue transition">
        去注册
      </navigator>
    </view>
  </Layout>
</template>

<style lang="scss" scoped></style>
